<template>
    <div class="cricle-activity">
        <ul>
            <li v-for="i in list" :key="i.id">
                <img :src="$Url+i.image" alt="">
                <div>
                    <p v-if="i.status==2"><img src="../../assets/hot.png" alt="" class="icon"><span>{{i.start_status}}</span></p>
                    <p v-if="i.status==1"><img src="../../assets/end.png" alt="" class="icon"><span style="color:#c0c0c0">{{i.start_status}}</span></p>
                    <p>已有{{i.num}}人报名</p>
                    <p @click="func(i.id)">查看</p>
                </div>
            </li>
        </ul>
        <div style="text-align: center;margin-top: 30px"> <Page :total="100" /></div>
    </div>
</template>

<script>
    export default {
        name: "CricleActivity",
        props:['list'],

        methods:{
            func (id) {
                this.$router.push({path: '/activitydelists',query:{id:id}})
            }
        }
    }
</script>

<style scoped lang="less">
    .cricle-activity{
        margin-bottom: 70px;
        ul{
            li{
                margin-bottom: 20px;
                >img{
                    width: 862px;
                    height: 298px;
                }
                div{
                    width: 862px;
                    height: 42px;
                    background-color: rgba(255,255,255,0.5);
                    position: absolute;
                    margin-top: -47px;
                    p{
                        float: left;
                    }
                    >:first-child{
                        color: #fcbd10;
                        font-size: 18px;
                        padding-left: 39px;
                        line-height: 42px;
                        width: 65%;
                        .icon{
                            margin-right: 5px;
                            margin-top: 8px;
                            float: left;
                        }
                        span{
                            float: left;
                        }
                    }
                    >:nth-child(2){
                        color: white;
                        font-size: 18px;
                        line-height: 42px;
                        vertical-align: top;
                    }
                    >:nth-child(3){
                        margin-top: 8px;
                        width: 92px;
                        height: 26px;
                        background-color: #ff5371;
                        border-radius: 4px;
                        color: white;
                        text-align: center;
                        line-height: 26px;
                        font-size: 18px;
                        float: right;
                        margin-right: 35px;
                        border-bottom: 2px solid #cd4966;
                        cursor: pointer;
                    }
                }
            }
        }

    }

</style>